// import { message } from "@/utils/message";
import { transformI18n } from "@/plugins/i18n";
import { getServerData } from "@/api/serverParameter";

import { ref, onMounted } from "vue";
export function useRole() {
  const editMap = ref({});
  const isShow = ref(false);
  const loading = ref(false);

  // 首页的那个数据
  const serverData = ref();
  const product = ref();
  const deviceInfo = ref();
  const interfaces = ref();
  // 边缘采集的数据
  const acquisitionData = ref();

  // 拿首页所有的数据
  async function onSearch() {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 500);
    serverData.value = await getServerData();
  }
  const typeOption = [
    { label: "bool", value: "bool" },
    { label: "Int", value: "Int" },
    { label: "Uint", value: "Uint" },
    { label: "Float", value: "Float" },
    { label: "Double", value: "Double" },
    { label: "int_64", value: "int_64" },
    { label: "uint_64", value: "uint_64" },
    { label: "String", value: "String" }
  ];
  const resetForm = formEl => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  };

  const filterMethod = (query: string, node) => {
    return transformI18n(node.title)!.includes(query);
  };
  const indexMethod = (index: number) => {
    return index + 1;
  };
  // 变量列表的数据
  const columns: TableColumnList = [
    {
      type: "index",
      label: "序号",
      minWidth: 60,
      align: "center",
      index: indexMethod
    },
    {
      label: "数据键名",
      prop: "dataKey",
      minWidth: 80,
      cellRenderer: ({ row, index }) => (
        <>
          {editMap.value[index]?.editable ? (
            <el-input v-model={row.dataKey} />
          ) : (
            <p>{row.dataKey}</p>
          )}
        </>
      )
    },

    {
      label: "数据类型",
      prop: "type",
      minWidth: 60,
      cellRenderer: ({ row, index }) => (
        <>
          {editMap.value[index]?.editable ? (
            <el-select v-model={row.type} placeholder="请选择属性">
              {typeOption.map(item => {
                return (
                  <el-option
                    key={item.value}
                    label={item.label}
                    value={item.value} // 确保这里的 item.value 是数字
                  />
                );
              })}
            </el-select>
          ) : (
            <div>
              {
                typeOption.filter(
                  opt => opt.value === row.type // 使用严格相等来进行比较
                )[0]?.label
              }
            </div>
          )}
        </>
      )
    },
    {
      label: "小数位",
      prop: "decimalPlaces",
      minWidth: 60,
      cellRenderer: ({ row, index }) => (
        <>
          {editMap.value[index]?.editable ? (
            <el-input v-model={row.decimalPlaces} />
          ) : (
            <p>{row.decimalPlaces}</p>
          )}
        </>
      )
    },
    {
      label: "数据处理",
      minWidth: 200,
      prop: "dataProcessing",
      cellRenderer: ({ row, index }) => (
        <>
          {editMap.value[index]?.editable ? (
            <el-input v-model={row.dataProcessing} type="textarea" />
          ) : (
            <p>{row.dataProcessing}</p>
          )}
        </>
      )
    },
    {
      label: "触发事件",
      minWidth: 200,
      prop: "triggeringEvent",
      cellRenderer: ({ row, index }) => (
        <>
          {editMap.value[index]?.editable ? (
            <el-input v-model={row.triggeringEvent} type="textarea" />
          ) : (
            <p>{row.triggeringEvent}</p>
          )}
        </>
      )
    },

    {
      label: "操作",
      fixed: "right",
      align: "center",
      minWidth: 120,
      slot: "operation"
    }
  ];
  function onEdit(row, index) {
    editMap.value[index] = Object.assign({ ...row, editable: true });
  }
  onMounted(async () => {
    // onSearch();
    // searchAcquisitionData();
  });

  return {
    isShow,
    loading,
    onSearch,
    resetForm,
    filterMethod,
    transformI18n,
    serverData,
    product,
    deviceInfo,
    interfaces,
    acquisitionData,
    columns,
    editMap,
    onEdit
  };
}
